<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, computed } from 'vue';
import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";
import authService from "@/services/auth.service";
import useAuthStore from "@/stores/auth";
import TabbarWrapper from '@/components/TabbarWrapper.vue';

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const { userProfile } = storeToRefs(authStore);
const currentUser = computed(() => userProfile?.value?.user);
</script>

<template>
    <div class="page-container absolute left-0 top-0 w-full h-full flex flex-col">
        <div class="header-container">
            <VanSearch show-action>
                <template #left>
                    <span class="py-0 px-5 font-bold">快安H5</span>
                </template>
                <template #action>
                    <div class="h-full flex flex-col justify-center">
                        <VanIcon name="chat-o" size="21" />
                    </div>
                </template>
            </VanSearch>
        </div>

        <div class="main-container flex-grow">
            Home
        </div>

        <div class="footer-container">
            <TabbarWrapper active-tab="home"></TabbarWrapper>
        </div>
    </div>
</template>

<style lang="scss" scoped></style>